<!-- -->
<template>
  <div class="select-meau">
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" ref="Item">
        <div v-for="(item,idx) in areaList" :key="idx" class="city">
          <p @click="searchCity(item)">{{ item }}</p>
        </div>
      </van-dropdown-item>
      <van-dropdown-item v-model="value2" :options="option2" @change="searchPrice"></van-dropdown-item>
      <van-dropdown-item v-model="value3" :options="option3" @change="searchType"></van-dropdown-item>

      <van-dropdown-item v-model="value4" :options="option4" class></van-dropdown-item>
    </van-dropdown-menu>
  </div>
</template>

<script>
import {
  searchPrice,
  getHouseList,
  getHouseData,
  searchHouseType
} from "@/api";
export default {
  props: ["classify"],
  // import引入到组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      value: "",
      value1: 0,
      value2: "a",
      value3: "a",
      value4: "a",
      option1: [{ text: "区域", value: 0 }],
      option2: [
        { text: "价格", value: "a" },
        { text: "不限", value: "b" },
        { text: "300万以下", value: "c" },
        { text: "300万~500万", value: "e" },
        { text: "500万~1000万", value: "f" },
        { text: "1000万以上", value: "g" }
      ],
      option3: [
        { text: "类型", value: "a" },
        { text: "叙利亚", value: 1 },
        { text: "北欧", value: 2 },
        { text: "中式", value: 3 },
        { text: "美式", value: 4 }
      ],
      option4: [{ text: "更多", value: "a" }],
      areaList: [],
      Area: "",
      value: ""
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监听data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    //   筛选价格
    searchPrice(e) {
      if (e === "c") {
        searchPrice({
          classify: this.classify * 1,
          obj: { a: 0, b: 300 }
        }).then(res => {
          this.$emit("price", res.data);
        });
      } else if (e === "b") {
        searchPrice({ classify: this.classify * 1, obj: {} }).then(res => {
          this.$emit("price", res.data);
        });
      } else if (e === "e") {
        searchPrice({
          classify: this.classify * 1,
          obj: { a: 300, b: 500 }
        }).then(res => {
          this.$emit("price", res.data);
        });
      } else if (e === "f") {
        searchPrice({
          classify: this.classify * 1,
          obj: { a: 500, b: 1000 }
        }).then(res => {
          this.$emit("price", res.data);
        });
      } else if (e === "g") {
        searchPrice({
          classify: this.classify * 1,
          obj: { a: 1000, b: 10000 }
        }).then(res => {
          this.$emit("price", res.data);
        });
      }
    },
    // 筛选区域
    getArea() {
      getHouseList().then(res => {
        // this.$emit("area", res.data);
        this.areaList = res.data;
      });
    },
    // 给每个区域绑定点击事件
    searchCity(val) {
      console.log(val);
      this.Area = val;
      this.$refs.Item.toggle();
      getHouseData({ area: this.Area }).then(res => {
        this.$emit("city", res.data);
      });
    },
    // 筛选类型
    searchType(e) {
      this.value = this.option3[e].text;
      searchHouseType({ value: this.value }).then(res => {
        this.$emit("type", res.data);
      });
    }
  },
  //生命周期 - 创建完成 (可以访问当前this实例)
  created() {
    this.getArea();
  },
  //生命周期 - 挂载完成 (可以访问DOM元素)
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang="scss" scoped>
.city {
  width: 100%;
  height: auto;
  padding: 0 10px;
  p {
    width: 100%;
    height: 35px;
  }
}
</style>
